<template>
  <view class="index-container">
    <view class="description">
      <text>欢迎使用本应用</text>
      <text>点击下方图片进入卡券中心</text>
    </view>

    <!-- 简单介绍图 -->
    <image class="intro-image" src="/static/images/dog.png" @click="navigateToCardPage"></image>

    <!-- 兑换流程 -->
    <view class="nav-title">
      兑换流程
    </view>

    <view class="exchange">
      <view class="exchange-item blue">
        <image class="exchange-image" src="/static/images/dog.png"></image>
        <view class="exchange-title">
          <text>提交卡密</text>
          <text>提交验卡</text>
        </view>
        
      </view>
      <view class="exchange-item yellow">
        <image class="exchange-image" src="/static/images/dog.png"></image>
        <view class="exchange-title">
          <text>确认商品</text>
          <text>提交订单</text>
        </view>
      </view>
      <view class="exchange-item green">
        <image class="exchange-image" src="/static/images/dog.png"></image>
        <view class="exchange-title">
          <text>等待发货</text>
          <text>确认收货</text>
        </view>
        
      </view>
    </view>
  </view>
</template>

<script setup>
const navigateToCardPage = () => {
  uni.switchTab({ url: '/pages/card/index' })
}
</script>
<style scoped lang="scss">
.index-container {
  display: flex;
  flex-direction: column;
  padding: 20px;
  justify-content: center;
  gap: 20px;
}
.nav-title{
  font-size: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  //文字前面加个小图标
  &::before{
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url('/static/images/right.png');
    background-size: cover;
  }
  
}
.intro-image {
  width: 100%;
  height: 300px;
  border-radius: 12px;
  margin-bottom: 20px;
}

.description {
  text-align: center;
  font-size: 16px;
  color: #666;
}
.exchange{
  padding: 20px 8px;
  background-color: #ffffff;
  border-radius: $uni-border-radius-base;
  display: flex;
  justify-content: space-around;
  align-items: center;
  .exchange-item{
    padding: 10px 8px;
    display: flex;
    align-items: center;
    border-radius: $uni-border-radius-base;
    gap: 4px;
    &.blue{
      background-color: #82c2f6;
    }
    &.yellow{
      background-color: #f7d05c;
    }
    &.green{
      background-color: #a5d0a5;
    }
    .exchange-image{
      width: 40px;
      height: 40px;
    }
    .exchange-title{
      font-size: 10px;
      display: flex;
      flex-direction: column;
      color: #ffffff;
    }
  }
}
</style>